<template>
  <div class="i_bg bg_color">
    <div class="i_ban_bg">
      <!--Begin Banner Begin-->
      <BannerView />
      <!--End Banner End-->
      <HotNewsView />
    </div>
    <!--Begin 热门商品 Begin-->
    <div class="content mar_10">
      <div class="h_l_img">
        <div class="img">
          <img src="@/assets/images/l_img.jpg" width="188" height="188" />
        </div>
        <div class="pri_bg">
          <span class="price fl">￥53.00</span>
          <span class="fr">16R</span>
        </div>
      </div>
      <div class="hot_pro">
        <div id="featureContainer">
          <div id="feature">
            <div id="block">
              <div id="botton-scroll">
                <ul class="featureUL">
                  <li class="featureBox">
                    <div class="box">
                      <div class="h_icon">
                        <img
                          src="@/assets/images/hot.png"
                          width="50"
                          height="50"
                        />
                      </div>
                      <div class="imgbg">
                        <a href="#"
                          ><img
                            src="@/assets/images/hot1.jpg"
                            width="160"
                            height="136"
                        /></a>
                      </div>
                      <div class="name">
                        <a href="#">
                          <h2>德国进口</h2>
                          德亚全脂纯牛奶200ml*48盒
                        </a>
                      </div>
                      <div class="price">
                        <font>￥<span>189</span></font> &nbsp; 26R
                      </div>
                    </div>
                  </li>
                  <li class="featureBox">
                    <div class="box">
                      <div class="h_icon">
                        <img
                          src="@/assets/images/hot.png"
                          width="50"
                          height="50"
                        />
                      </div>
                      <div class="imgbg">
                        <a href="#"
                          ><img
                            src="@/assets/images/hot2.jpg"
                            width="160"
                            height="136"
                        /></a>
                      </div>
                      <div class="name">
                        <a href="#">
                          <h2>iphone 6S</h2>
                          Apple/苹果 iPhone 6s Plus公开版
                        </a>
                      </div>
                      <div class="price">
                        <font>￥<span>5288</span></font> &nbsp; 25R
                      </div>
                    </div>
                  </li>
                  <li class="featureBox">
                    <div class="box">
                      <div class="h_icon">
                        <img
                          src="@/assets/images/hot.png"
                          width="50"
                          height="50"
                        />
                      </div>
                      <div class="imgbg">
                        <a href="#"
                          ><img
                            src="@/assets/images/hot3.jpg"
                            width="160"
                            height="136"
                        /></a>
                      </div>
                      <div class="name">
                        <a href="#">
                          <h2>倩碧特惠组合套装</h2>
                          倩碧补水组合套装8折促销
                        </a>
                      </div>
                      <div class="price">
                        <font>￥<span>368</span></font> &nbsp; 18R
                      </div>
                    </div>
                  </li>
                  <li class="featureBox">
                    <div class="box">
                      <div class="h_icon">
                        <img
                          src="@/assets/images/hot.png"
                          width="50"
                          height="50"
                        />
                      </div>
                      <div class="imgbg">
                        <a href="#"
                          ><img
                            src="@/assets/images/hot4.jpg"
                            width="160"
                            height="136"
                        /></a>
                      </div>
                      <div class="name">
                        <a href="#">
                          <h2>品利特级橄榄油</h2>
                          750ml*4瓶装组合 西班牙原装进口
                        </a>
                      </div>
                      <div class="price">
                        <font>￥<span>280</span></font> &nbsp; 30R
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <a class="h_prev" href="javascript:void();">Previous</a>
            <a class="h_next" href="javascript:void();">Next</a>
          </div>
        </div>
      </div>
    </div>
    <!--Begin 限时特卖 Begin-->
    <div class="i_t mar_10">
      <span class="fl">限时特卖</span>
      <span class="i_mores fr"><a href="#">更多</a></span>
    </div>
    <div class="content">
      <div class="i_sell">
        <div id="imgPlay">
          <ul class="imgs" id="actor">
            <li>
              <a href="#"
                ><img src="@/assets/images/tm_r.jpg" width="211" height="357"
              /></a>
            </li>
            <li>
              <a href="#"
                ><img src="@/assets/images/tm_r.jpg" width="211" height="357"
              /></a>
            </li>
            <li>
              <a href="#"
                ><img src="@/assets/images/tm_r.jpg" width="211" height="357"
              /></a>
            </li>
          </ul>
          <div class="previ">上一张</div>
          <div class="nexti">下一张</div>
        </div>
      </div>
      <div class="sell_right">
        <div class="sell_1">
          <div class="s_img">
            <a href="#"
              ><img src="@/assets/images/tm_1.jpg" width="185" height="155"
            /></a>
          </div>
          <div class="s_price">￥<span>89</span></div>
          <div class="s_name">
            <h2><a href="#">沙宣洗发水</a></h2>
            倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
          </div>
        </div>
        <div class="sell_2">
          <div class="s_img">
            <a href="#"
              ><img src="@/assets/images/tm_2.jpg" width="185" height="155"
            /></a>
          </div>
          <div class="s_price">￥<span>289</span></div>
          <div class="s_name">
            <h2><a href="#">德芙巧克力</a></h2>
            倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
          </div>
        </div>
        <div class="sell_b1">
          <div class="sb_img">
            <a href="#"
              ><img src="@/assets/images/tm_b1.jpg" width="242" height="356"
            /></a>
          </div>
          <div class="s_price">￥<span>289</span></div>
          <div class="s_name">
            <h2><a href="#">东北大米</a></h2>
            倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
          </div>
        </div>
        <div class="sell_3">
          <div class="s_img">
            <a href="#"
              ><img src="@/assets/images/tm_3.jpg" width="185" height="155"
            /></a>
          </div>
          <div class="s_price">￥<span>289</span></div>
          <div class="s_name">
            <h2><a href="#">迪奥香水</a></h2>
            倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
          </div>
        </div>
        <div class="sell_4">
          <div class="s_img">
            <a href="#"
              ><img src="@/assets/images/tm_4.jpg" width="185" height="155"
            /></a>
          </div>
          <div class="s_price">￥<span>289</span></div>
          <div class="s_name">
            <h2><a href="#">美妆</a></h2>
            倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
          </div>
        </div>
        <div class="sell_b2">
          <div class="sb_img">
            <a href="#"
              ><img src="@/assets/images/tm_b2.jpg" width="242" height="356"
            /></a>
          </div>
          <div class="s_price">￥<span>289</span></div>
          <div class="s_name">
            <h2><a href="#">美妆</a></h2>
            倒计时：<span>1200</span> 时 <span>30</span> 分 <span>28</span> 秒
          </div>
        </div>
      </div>
    </div>
    <!--End 限时特卖 End-->
    <div class="content mar_20">
      <img src="@/assets/images/mban_1.jpg" width="1200" height="110" />
    </div>
    <!--Begin 进口 生鲜 Begin-->
    <template v-if="firstLevelList != null && levelMap != null">
      <div  v-for="(first, index) in firstLevelList" :key="first.id">
        <div class="i_t mar_10">
          <span class="floor_num">{{ index + 1 }}F</span>
          <span class="fl">{{ first.name }}</span>
          <!-- 二级分类-->
          <span
            class="i_mores fr"
            v-for="second in levelMap[first.name]"
            :key="second.id"
          >
            <router-link :to="{name: 'GoodsList', params:{categoryId: second.id, type: 2}}">{{ second.name }}</router-link
            >&nbsp;&nbsp;&nbsp;
          </span>
          
        </div>
        <div class="content">
            <div class="fresh_left">
              <div class="fre_ban">
                <div id="imgPlay1">
                  <ul class="imgs" id="actor1">
                    <li>
                      <a href="#"
                        ><img
                          src="@/assets/images/fre_r.jpg"
                          width="211"
                          height="286"
                      /></a>
                    </li>
                    <li>
                      <a href="#"
                        ><img
                          src="@/assets/images/fre_r.jpg"
                          width="211"
                          height="286"
                      /></a>
                    </li>
                    <li>
                      <a href="#"
                        ><img
                          src="@/assets/images/fre_r.jpg"
                          width="211"
                          height="286"
                      /></a>
                    </li>
                  </ul>
                  <div class="prevf">上一张</div>
                  <div class="nextf">下一张</div>
                </div>
              </div>
              <div class="fresh_txt">
                <!-- 三级分类 -->
                <div class="fresh_txt_c" v-show="firstLevelList != null && levelMap != null">
                  <router-link v-for="third in getThirdLevelList(levelMap[first.name])" :key="third.id" :to="{name: 'GoodsList', params:{categoryId: third.id, type: 2}}">{{third.name}}</router-link>
                  <!-- <a href="#">进口水果</a><a href="#">奇异果</a
                  ><a href="#">西柚</a><a href="#">海鲜水产</a
                  ><a href="#">品质牛肉</a><a href="#">奶粉</a
                  ><a href="#">鲜活禽蛋</a><a href="#">进口酒</a
                  ><a href="#">进口奶粉</a><a href="#">鲜活禽蛋</a> -->
                </div>
              </div>
            </div>
            <!-- 前六商品：商品名，商品价格，商品图片-->
            <div class="fresh_mid">
              <ul v-if="firstLevelPageInfo[first.name] != null">
                <li v-for="product in firstLevelPageInfo[first.name].list" :key="product.id">
                  <div class="name"><a href="#">{{product.name}}</a></div>
                  <div class="price">
                    <font>￥<span>{{product.price}}</span></font> &nbsp; 
                  </div>
                  <div class="img">
                    <router-link :to="{name:'GoodsDetail', params: {id: product.id}}"
                      ><img
                        :src="imagesDir + product.fileName"
                        width="185"
                        height="155"
                    /></router-link>
                  </div>
                </li>
                
              </ul>
            </div>
            <div class="fresh_right">
              <ul>
                <li>
                  <a href="#"
                    ><img
                      src="@/assets/images/fre_b1.jpg"
                      width="260"
                      height="220"
                  /></a>
                </li>
                <li>
                  <a href="#"
                    ><img
                      src="@/assets/images/fre_b2.jpg"
                      width="260"
                      height="220"
                  /></a>
                </li>
              </ul>
            </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import BannerView from "./BannerView.vue";
import HotNewsView from "./HotNewsView.vue";
import { mapGetters } from 'vuex';

export default {
  data() {
    return {
      imagesDir: sessionStorage.getItem("imagesDir"),
      firstLevelPageInfo: {}
    };
  },
  methods: {
    //获取三级分类
    getThirdLevelList(secondLevelList) { //从levelMap中获取
      let arr = [];
      if(secondLevelList != null && secondLevelList.length > 0) {
        // console.log("---begin-----")
        secondLevelList.forEach(i => {
          // console.log(i)
          arr.push({name: i.name, id: i.id})
        })
        // console.log("----end-----")
      }
      // console.log(arr);
      return arr;
    },
    getProductInFirstLevel(name, id) {
      this.$axios({
        url: '/api/product/category',
        method: 'POST',
        data: {
          pageNum: 1,
          pageSize: 6,
          type: 1,
          categoryId: id
        }
      }).then(rs => {
        this.$set(this.firstLevelPageInfo, name, rs.data.pageinfo);
      })
    },
    initProducts() {
      if(this.firstLevelList != null) {
          this.firstLevelList.forEach(i => {
          this.getProductInFirstLevel(i.name, i.id);
        })
      }
    }
  },
  components: {
    BannerView,
    HotNewsView,
  },
  computed: {
    ...mapGetters(["firstLevelList", "levelMap"]),
  },
  created() {
    //加载商品
    this.initProducts();
  },
};
</script>

<style>
</style>